<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      /* 基本样式 */
      body {
        font-family: Arial, sans-serif;
      }

     .form-inline {
        display: inline-block;
      }

      table {
        width: 100%;
        border-collapse: collapse;
      }

      th,
      td {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
      }

      th {
        background-color: #f2f2f2;
      }

      table th:nth-of-type(3),
      table td:nth-of-type(3) {
        width: 10%;
      }

      @media print {
        /* 设置较小的页面边距 */
        @page {
          margin: 0.5cm;
        }

        /* 保持内容的显示，不隐藏header, footer, nav, form */
        header,
        footer,
        nav,
        form {
          display: block;
        }

        /* 调整表格和单元格的字体大小 */
        table,
        th,
        td {
          font-size: smaller; /* 减小字体大小 */
        }

        table th:nth-of-type(2),table td:nth-of-type(2) {
        width: 10%;
      }

        /* 如果需要，可以取消分页规则 */
        /* table {
    page-break-inside: avoid;
  } */

        /* 其他打印样式规则 */
        /* 隐藏不需要打印的部分 */
        header,
        footer,
        nav,
        form {
          display: none;
        }
      }
    </style>
    <title>打印数据</title>
  </head>

  <body>
    <!-- 导航 -->
    <header>
      <nav>
        <button id="printButton">点击我打印</button>
        <button id="backButton">返回首页</button>
        <form method="post" action="{% url 'filter_by_date' %}">
          {% csrf_token %}
          <span>检验日期:</span>
          <input type="date" id="date" name="date" />
          <input type="submit" value="提交" />
        </form>

        <form class="form-inline" method="get" action="{% url 'index' %}">
          {% csrf_token %}
          <span>批号:</span>
          <button type="submit" name="order" value="asc" {% if order == 'asc' %}class="active"{% endif %}>从小到大</button>
          <button type="submit" name="order" value="desc" {% if order == 'desc' %}class="active"{% endif %}>从大到小</button>
        </form>

        <form class="form-inline" method="post" action="{% url 'filter_by_batch' %}">
          {% csrf_token %}
          <select name="批号">
              <option value="">请选择批号</option>
              {% for batch in distinct_batches %}
              <option value="{{ batch }}">{{ batch }}</option>
              {% endfor %}
          </select>
          <input type="submit" value="提交">
      </form>



      </nav>
    </header>
    <div id="new-layout-container">
        <table>
            <thead>
                <tr>
                <th>选择</th>
                <th>检验单号</th>
                <th>检验日期</th>
                <th>存货编码</th>
                <th>存货名称</th>
                <th>规格型号</th>
                <th>品牌</th>
                <th>供应商编码</th>
                <th>供应商名称</th>
                <th>批号</th>
                <th>生产日期</th>
                <th>合格数量</th>
                <th>不良数量</th>
                </tr>
            </thead>
            <tbody>
                {% for data in datas %}
                <tr>
                <td>
                    <input
                    type="checkbox"
                    name="selected_rows"
                    value="{{ data.检验单号 }}"
                    />
                </td>
                <td>{{data.检验单号}}</td>
                <td>{{ data.检验日期|date:"Y-m-d" }}</td>
                <td>{{data.存货编码}}</td>
                <td>{{data.存货名称}}</td>
                <td>{{data.规格型号}}</td>
                <td>{{data.品牌}}</td>
                <td>{{data.供应商编码}}</td>
                <td>{{data.供应商名称}}</td>
                <td>{{data.批号}}</td>
                <td>{{data.生产日期|date:"Y-m-d"}}</td>
                <td>{{data.合格数量}}</td>
                <td>{{data.不良数量}}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div id="data-container"></div>
    <!-- 尾部 -->
    <footer>
      <button id="confirmButton">确认</button>
    </footer>
    <script>
      // 等待DOM加载完毕
      document.addEventListener("DOMContentLoaded", function () {
        // 获取打印按钮元素
        var printButton = document.getElementById("printButton");

        // 为打印按钮添加点击事件监听器
        printButton.addEventListener("click", function () {
          // 直接调用window.print()方法来触发打印对话框
          window.print();
        });

        // 获取返回按钮元素
        var backButton = document.getElementById("backButton");

        // 获取所有表单元素
        var forms = document.querySelectorAll("form");

        // 为每个表单添加提交事件监听器
        forms.forEach(function (form) {
          form.addEventListener("submit", function (event) {
            // // 阻止表单默认提交行为
            // event.preventDefault();

            // 隐藏所有表单
            forms.forEach(function (f) {
              f.style.display = "none";
            });

            // // 显示返回按钮
            // backButton.style.display = 'block';
          });
        });

        // 为返回按钮添加点击事件监听器
        backButton.addEventListener("click", function () {
          // 隐藏返回按钮
          backButton.style.display = "none";

          // 显示所有表单
          forms.forEach(function (f) {
            f.style.display = "block";
          });

          // 跳转到首页
          window.location.href = "http://192.168.12.2:8000/";
        });

        // 获取确认按钮元素
        var confirmButton = document.getElementById("confirmButton");

        // 为确认按钮添加点击事件监听器
        confirmButton.addEventListener("click", function () {
          // 创建一个数组来存储选中的数据对象
          var selectedDataArray = [];
          // 获取所有复选框
          var checkboxes = document.querySelectorAll(
            'input[name="selected_rows"]'
          );
          // 获取所有数据行
          var rows = document.querySelectorAll("tbody tr");

          checkboxes.forEach(function (checkbox) {
            if (checkbox.checked) {
              // 根据检验单号找到对应的数据行
              var 检验单号 = checkbox.value;
              var dataRow = Array.from(rows).find(
                (row) => row.cells[1].textContent === 检验单号
              );
              if (dataRow) {
                // 构建数据对象
                var dataObj = {
                  检验单号: dataRow.cells[1].textContent,
                  检验日期: dataRow.cells[2].textContent,
                  存货编码: dataRow.cells[3].textContent,
                  存货名称: dataRow.cells[4].textContent,
                  规格型号: dataRow.cells[5].textContent,
                  品牌: dataRow.cells[6].textContent,
                  供应商编码: dataRow.cells[7].textContent,
                  供应商名称: dataRow.cells[8].textContent,
                  批号: dataRow.cells[9].textContent,
                  生产日期: dataRow.cells[10].textContent,
                  合格数量: dataRow.cells[11].textContent,
                  不良数量: dataRow.cells[12].textContent,
                };
                // 将数据对象添加到数组中
                selectedDataArray.push(dataObj);
              }
            }
          });

          // 如果没有选中任何行，则不执行任何操作或给出提示
          if (selectedDataArray.length === 0) {
            alert("请选择至少一行数据。");
            return;
          }

          function createNewPageLayout(data) {
        // 获取新布局的容器
        var container = document.getElementById('new-layout-container');

        // 清空容器内容
        container.innerHTML = '';

        // 创建新的布局
        var layout = `
          <div class="product-info">
            <div class="item item-alone">
              <p>存货编码：${data.物料编码}</p>
            </div>
            <!-- 其他 item 元素 -->
          </div>
        `;

        data.forEach(function (row) {
          // 创建一个新的div元素作为容器
          var containerDiv = document.createElement("div");
          containerDiv.className = "data-row"; // 可以添加一个类名用于样式

          // 遍历数据对象的每个属性和值
          Object.entries(row).forEach(function ([key, value], index) {
            // 创建一个新的div元素作为数据单元
            var dataDiv = document.createElement("div");
            dataDiv.className = "data-cell"; // 可以添加一个类名用于样式

            // 设置数据单元的文本内容
            dataDiv.textContent = `${key}: ${value}`;

            // 如果不是第一列数据，添加分隔线样式
            if (index > 0) {
              dataDiv.style.borderLeft = "1px solid #ccc"; // 例如添加灰色的分隔线
            }

            // 将数据单元添加到容器div中
            containerDiv.appendChild(dataDiv);
          });

          // 将容器div添加到页面的某个元素中，例如一个id为"data-container"的div
          document.getElementById("data-container").appendChild(containerDiv);
        });

        // 将新布局添加到容器中
        container.innerHTML = layout;
      }

      // 假设这是从服务器获取的数据
      var data = {
        物料编码: '3B00001',
        // 产品名称: 'TJA1051T/3，118',
        // 批次/序列号: 'SN201021095596',
        // 生产日期: '2016-10-10',
        // 数量: '100',
        // 品牌: 'NXP',
        // 规格型号: 'C4N接口集成电路.SO-8(SMD)',
        // // 其他数据属性...
      };

      // 调用函数来创建新页面布局
      createNewPageLayout(data);

        });

        // 创建新表格的函数
        
      });
    </script>
  </body>
</html>
